<template>
  <div :style="{width}">
    <el-form :inline="true" :model="form" size="mini">
      <el-form-item v-for="item in show_fields" :key="item.prop" :label="item.label">
        <form-element v-model="form[item.prop]" :element="item.element" :type="item.type" :width="item.width" :placeholder="item.placeholder" />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">查询</el-button>
      </el-form-item>
      <el-form-item>
        <el-link type="primary" @click="to_toogle">高级搜索<i class="el-icon-caret-bottom" /></el-link>

      </el-form-item>
      <el-form-item v-show="conditions.length > 0">
        <el-tag
          v-for="(tag) in conditions"
          :key="tag.prop"
          style="margin-right:5px;"
          closable
          @close="tag_close(tag.prop)"
        >{{ tag.label + tag.value }}</el-tag>
      </el-form-item>
    </el-form>
    <transition name="fade">
      <el-card v-show="toogle" class="box-card" :style="{width}">
        <el-form :model="form" :inline="true" size="mini">
          <el-form-item v-for="item in hide_fields" :key="item.prop" :label="item.label">
            <form-element v-model="form[item.prop]" :element="item.element" :type="item.type" :width="item.width" :placeholder="item.placeholder" />
          </el-form-item>
        </el-form>
      </el-card>
    </transition>
  </div>
</template>

<script>
import formElement from '../form-element/index'
import { format } from '@/utils/dt'

/**
* 属性 fields 的类型
interface IField {
  prop: string, // 字段属性
  label: string, // 显示内容
  placeholder: string, // 占位文本
  type: string, // 表单元素类型
  hide: boolean, // 是否隐藏
}
**/

export default {
  components: {
    formElement
  },
  props: {
    fields: {
      required: true,
      type: Array // IField
    },
    width: {
      type: String,
      default: '100%'
    }
  },
  data: function() {
    return {
      form: this.fields.reduce((p, field) => {
        p[field.prop] = ''
        return p
      }, {}),
      toogle: false, // 控制隐藏条件的显示和隐藏
      conditions: [],
      left: ''
    }
  },
  computed: {
    show_fields() {
      return this.fields.filter((i) => {
        return !i.hide
      })
    },
    hide_fields() {
      return this.fields.filter((i) => {
        return i.hide
      })
    }
  },
  methods: {
    to_toogle(e) {
      this.toogle = !this.toogle
    },
    onSubmit(e) {
      this.toogle = false
      this.conditions = this.hide_fields.filter((i) => {
        return this.form[i.prop]
      }).map((j) => {
        return {
          ...j,
          value: this.display_formater(j.element, j.type, this.form[j.prop])
        }
      })
      this.$emit('advanced-search-sure', this.form)
    },
    tag_close(prop) {
      this.form[prop] = ''
      this.onSubmit()
    },
    custom_model(prop, value) {
      this.form[prop] = value
    },
    // 处理日期区间
    display_formater(element, type, value) {
      if (element === 'el-date-picker') {
        if (type === 'daterange') {
          return value.split(',').map((i) => {
            return format(new Date(Number(i)), 'YYYY-MM-DD')
          }).join('至')
        } else if (type === 'year') {
          return format(new Date(Number(value)), 'YYYY') + '年'
        } else if (type === 'dates') {
          return value.split(',').map((i) => {
            return format(new Date(Number(i)), 'YYYY-MM-DD')
          }).join(',')
        }
      } else {
        return value
      }
    }
  }
}
</script>

<style lang="scss" scoped>

.box-card {
  position: absolute;
  z-index: 100;
  background: white;
  padding: 0px 10px 0px 10px;
    margin-top: -10px;
}
.fade-enter-active, .fade-leave-active {
  transition: opacity .5s;
}
.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
  opacity: 0;
}

</style>
